// 1.渲染学生数据
const getStudent = async () => {
  const res = await axios.get("/students");
  // console.log(res);
  document.querySelector(".list").innerHTML = res.data
    .map((item) => {
      return `
    <tr>
       <td>${item.name}</td>
       <td>${item.age}</td>
       <!-- 由于gender包装为了0和1,因此要进行判断 -->
       <td>${item.gender === "0" ? "男" : "女"}</td>
       <td>第${item.group}组</td>
       <td>${item.hope_salary}</td>
       <td>${item.salary}</td>
       <td>${item.province + item.city + item.area}</td>
       <td>
         <a href="javascript:;" class="text-success mr-3"><i data-id ='${
           item.id
         }' class="bi bi-pen"></i></a>
         <a href="javascript:;" class="text-danger"><i data-id ='${
           item.id
         }' class="bi bi-trash"></i></a>
       </td>
    </tr>
    `;
    })
    .join("");
  document.querySelector(".total").innerHTML = res.data.length;
};

// 2.删除学生信息（需要获取id来进行判断）
document.querySelector(".list").addEventListener("click", async function (e) {
  // 判断点击到的地方是否是删除
  if (e.target.classList.contains("bi-trash")) {
    // 取出标签中的id
    const id = e.target.dataset.id;
    try {
      await axios.delete(`/students/${id}`);
      tip("删除成功");
      //  重新渲染页面
      getStudent();
    } catch (e) {
      console.dir(e);
    }
  }
});

// 3.处理模态框
const modal = new bootstrap.Modal(document.querySelector("#modal"));

document
  .querySelector("#openModal")
  .addEventListener("click", async function (e) {
    // 修改模态框标题
    document.querySelector(".modal-title").innerHTML = "添加学员";
    // 添加自定义属性
    document.querySelector("#form").dataset.id = "add";
    // 获取省市区数据
    // await 进行代码阻断
    await renderProvince();
    await renderCity();
    await renderArea();
    // 显示模态框
    modal.show();
  });

// 4.修改学员信息 （暂时）
document.querySelector(".list").addEventListener("click", async function (e) {
  if (e.target.classList.contains("bi-pen")) {
    // 获取学员id来作为和修改学员模态框的区分。方便后续判断
    const id = e.target.dataset.id;
    console.log(id);
    // 修改模态框标题
    document.querySelector(".modal-title").innerHTML = "修改学员信息";
    // 添加自定义属性
    document.querySelector("#form").dataset.id = "id";
    // 获取省市区数据
    // await 进行代码阻断
    await renderProvince("湖南省");
    await renderCity("永州市");
    await renderArea("祁阳县");

    // 显示模态框
    modal.show();
  }
});

// 5.修改和添加数据，但是建议先获取省市区，因此先选择获取省市区
document.querySelector("#submit").addEventListener("click", async function () {
  // 获取form表单
  const form = document.querySelector("#form");
  // 判断点击的是添加的模态框还是修改的模态框
  if (form.dataset.id === "add") {
    // 将表单中的数据转化为对象形式
    const data = serialize(form, { hash: true });
    // 由于axios中的参数需要字符串和数字型，但是serialize只能转化为字符串，因此要先进行数字型的转化才可以使用,使用isNaN()
    // 使用forin遍历对象
    for (const k in data) {
      if (isNaN(data[k]) === false) {
        // 取出数字类型进行转换
        data[k] = +data[k];
      }
    }
    // console.log(data);
    const res = await axios.post("/students", data);
    console.log(res);
    // 关闭模态框
    modal.hide();
    // 渲染页面
    getStudent();
    //清空form表单
    form.reset();
  }
});

// 6.获取省份数据
const renderProvince = async (province = "") => {
  const res = await axios.get("/api/province");
  // console.log(res);
  document.querySelector("[name=province]").innerHTML = res.data.map((item) => {
    return `<option value="${item}">${item}</option>`;
  });
  // 默认值设定 如果开始参数为空，那么就添加进去，如果参数不为空，那么就不添加，这是为了之后修改学员数据做准备
  province && (document.querySelector("[name=province]").value = province);
};

// 7.获取市级数据
const renderCity = async (city = "") => {
  // 先获取省份的参数
  const pname = document.querySelector("[name=province]").value;
  // 将省份的参数填入
  const res = await axios.get("/api/city", { params: { pname } });
  document.querySelector("[name=city]").innerHTML = res.data.map((item) => {
    return `<option value="${item}">${item}</option>`;
  });
  // 默认值设定 如果开始参数为空，那么就添加进去，如果参数不为空，那么就不添加，这是为了之后修改学员数据做准备
  city && (document.querySelector("[name=city]").value = city);
};

// 8.获取区县数据
const renderArea = async (area = "") => {
  // 先获取省区的参数
  const pname = document.querySelector("[name=province]").value;
  const cname = document.querySelector("[name=city]").value;
  // 将省区的变量作为参数传入
  const res = await axios.get("/api/area", { params: { pname, cname } });
  // 判断是否存在区县，记得写，更要想到这个
  if (res.data !== undefined) {
    document.querySelector("[name=area]").innerHTML = res.data.map((item) => {
      return `<option value="${item}">${item}</option>`;
    });
    // 默认值设定 如果开始参数为空，那么就添加进去，如果参数不为空，那么就不添加，这是为了之后修改学员数据做准备
    area && (document.querySelector("[name=area]").value = area);
  } else {
    document.querySelector(
      "[name=area]"
    ).innerHTML = `<option value="">--无--</option>`;
  }
};

// 9.省市联动
// 也要写上async/await 防止因数据传入时间不同导致的bug
document
  .querySelector("[name=province]")
  .addEventListener("change", async function () {
    await renderCity();
    await renderArea();
  });

// 10.市区联动
document
  .querySelector("[name=city]")
  .addEventListener("change", async function () {
    await renderArea();
  });

getStudent();
